<template>
 <div>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="AddClass" style="padding: 9px 15px;font-size: 12px;float: left">创建班级</el-button>
            </div>
            <el-table :data="data" id="out-table"  border style="width: 100%">
                <el-table-column prop="teachClassId" label="班级ID" widht="100"></el-table-column>
                <el-table-column prop="name" label="班级名称" widht="100"></el-table-column>
                <el-table-column prop="type" label="班级类型" width="180" :formatter="typeFormat"></el-table-column>
                <el-table-column prop="organizationUserName" label="班主任" width="180" ></el-table-column>
                <el-table-column prop="studentCount" label="学员数"></el-table-column>
                <el-table-column prop="planLessionStatus" label="排课状态" :formatter="stateFormat">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="EditClass(scope.row)" size="medium">编辑</el-button>
                        <el-button type="text" size="medium" @click="handleAddStudent(scope.row)">添加学员</el-button>
                        <el-button type="text" size="medium" @click="handlePlan(scope.row)">排课计划</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="pageData">
                </el-pagination>
            </div>
        </div>
    </div>
 </div>
</template>

<script>
export default {
  name: "basetable",
  // inject:['reload'],
  data() {
    return {
      url: "",
      tableData:[],
      fengye:1,
      pageData: undefined,
      delVisible: false,
      isEnableArr: ""
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    //状态码判断
    stateFormat(row, status) {   
        if (row.planLessionStatus === 0) {
            return '未排课'
        } else if (row.planLessionStatus === 1) {
            return '已排课'
        }
    },
    typeFormat(row,status){
      if(row.type === 1){
          return "松果班（大班）"
      } else if(row.type === 2){
          return "橡果班（中班）"
      } else if(row.type === 3){
          return "榛果班（小班）"
      } else if(row.type === 4){
          return "果果班（混龄班）"
      }
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/user/xzs/teachClass.list.get"; 
      this.$axios({
        url:this.url,
        method:"post",
        data:{  
          organizationId:organizationId,
          pageNum: that.fengye,
          pageSize: "10",
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }     
        ],
      }).then(res =>{
        this.tableData=res.data.data.pageList
        this.pageData = res.data.data.total
        
      }).catch(err =>{
        console.log(err);
      })  
    },
    //时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 
      var Y = date.getFullYear() + "-";
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; 
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = String(date.getMinutes()).padStart(2, "0");
      return Y + M + D + h + m;
    },
    // 创建班级
    AddClass(){
      this.$router.push({ path: "/AddClass?status=0" });
    },
    // 编辑班级
    EditClass(row){
      console.log(row.planLessionStatus);
      this.$router.push({ path: "/AddClass?teachClassId="+row.teachClassId+"&status="+row.planLessionStatus});
    },

    handleAddStudent(row){
      this.$router.push({ path: "/AddClass?teachClassId="+row.teachClassId+"&active=second"});
    },

    handlePlan(row){
      console.log(row)
      this.$router.push({ path: "/AddClass?teachClassId="+row.teachClassId+"&active=third&status="+row.planLessionStatus+"&name="+row.name});
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  height: 50px;
  margin-top: -20px;
  border-radius: 5px;
  background: #f4fafa;
}
.handle-input {
  width: 235px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.el-table thead {
  text-align: center;
  color: black;
}
</style>
</style>
